<!--
 * @Author: ssj
 * @Date: 2021-12-08 09:25:16
 * @LastEditors: zss
 * @LastEditTime: 2024-10-29 14:57:01
 * @Description: 
-->
<template>
  <i-col
    :lg="16"
    :md="16"
    :style="{
      flex: '0 0 calc(' + 25 * ffieldwidth + '%' + ' - ' + 10 + 'px)',
      height: (fheight || 300) + 'px'
    }"
  >
    <!-- <i-col
    :lg="16"
    :md="16"
    :style="{
      height: '300px'
    }"
  > -->
    <div class="home-page-box">
      <div class="home-page-header clear">
        <div class="home-page-header-left">
          {{ $srv.getI18nByPath('menu.commonnavigation') }}
        </div>
      </div>

      <div class="home-page-body">
        <div class="common-nav y-scroll clear">
          <div class="common-nav-item" @click="addNav">
            <i class="ivu-icon ivu-icon-ios-add"></i>
          </div>
          <div
            class="common-nav-item"
            v-for="(el, idx) of navData"
            :key="idx"
            @click="doAddTab(el.funName)"
          >
            <!-- <i :class="['ivu-icon', 'wy-icon', getIcon(el.funIcon)]"></i> -->
            <i :class="['ivu-icon', 'wy-icon', el.funIcon]"></i>
            <p>{{ $srv.getI18nBySrv(el.funName) }}</p>
            <span
              class="ivu-icon ivu-icon-ios-close"
              @click.stop="delIcon(el.id)"
            ></span>
          </div>
          <!-- <Icon type="md-arrow-up" @click="sendMsg" /> -->
        </div>
      </div>
    </div>
  </i-col>
</template>
<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue } from '@/services';

interface navList {
  key: number;
  label: string;
  icon: string;
}

interface navData {
  id: number;
  funID: number;
  funName: string;
  funIcon: string;
}

@T_srv.comp
export default class homeNav extends vue {
  @T_srv.inject() addTabFunc;

  @T_srv.prop({})
  ffieldwidth: number;

  @T_srv.prop({})
  fheight: number;

  get getIcon() {
    return (icon: string) => `wy-${icon}`;
  }

  private navConfigData: any = this.$store.getters.SysInfo.navs;

  private navData: Array<navData> = [];

  private navKey: number[] = [];

  private navList: Array<navList> = [];

  private navOld: number[] = [];

  mounted() {
    this.getNavlist();
    this.navInit();
  }

  public navInit() {
    this.requestNavUseless();
    // await this.requestGetNavData();
  }

  public getNavlist() {
    this.navConfigData.forEach(el => {
      el.menus.forEach(el2 => {
        el2.groupMembers.forEach(el3 => {
          if (!Tsrv.noValue(el3.children)) {
            el3.children.forEach(el4 => {
              this.navList.push({
                key: el4.funID,
                label: el4.title,
                icon: el4.iconName
              });
            });
          }
          this.navList.push({
            key: el3.funID,
            label: el3.title,
            icon: el3.iconName
          });
        });
      });
    });
  }

  public addNav() {
    this.requestNavSel();
  }

  public requestNavSel() {
    Tsrv.utils
      .createModal('o-transfer', {
        modalTitle: Tsrv.getI18nByPath('oCommonNav.selectcommonnavigation'),
        transferTitle: [
          Tsrv.getI18nByPath('oCommonNav.allfunctions'),
          Tsrv.getI18nByPath('oCommonNav.commonfunctions')
        ],
        filterable: true,
        data: this.navList,
        targetKeys: this.navData.map(el => el.funID)
      })
      .then(data => {
        if (data) {
          const diff = this.diffArr(this.navOld, data);
          this.requestSetNavData(diff);
        }
      });
  }

  public requestSetNavData(data: any) {
    const ctd = new ts.T_ctdArg();
    ctd
      .setTableName('_sys_common_nav')
      .setDbType(Tsrv.globalVar.dbType.MYSQL)
      .setRule({} as ifs.I_rule);
    if (!Tsrv.noValue(data.addArr)) {
      const bDatas: ifs.I_baseData[] = [];
      const scope = {};
      data.addArr.forEach(el => {
        const find = Tsrv.utils.find(this.navList, item => item.key === el);
        const datas = [];
        datas.push(
          {
            field: '_sys_fun_id',
            value: find.key
          },
          {
            field: 'fun_name',
            value: find.label
          },
          {
            field: '_sys_user_id',
            value: Tsrv.getUserID()
          }
        );

        const bData = new ts.T_baseData();
        bData
          .setDataRule({} as ifs.I_rule)
          .setFileInfo({})
          .setRowData(...datas);
        bDatas.push(bData);
      });
      ctd.setInsRecDataMany(scope, ...bDatas);
    }
    if (!Tsrv.noValue(data.delArr)) {
      const idx = [];
      data.delArr.forEach(el => {
        const find = Tsrv.utils.find(this.navData, item => item.funID === el);
        if (!Tsrv.noValue(find)) {
          idx.push(find.id);
        }
      });
      ctd.setDelRecData({} as ifs.I_rule, { id: { $in: idx } });
    }
    Tsrv.batRows(ctd).then(([b, res, msg]) => {
      if (!b) {
        this.$msg(msg);
      } else {
        this.navInit();
      }
    });
  }

  // public async requestGetNavData() {
  //   const res: any = await Tsrv.httpReqV1.query({
  //     fields:
  //       'a.id,a._sys_fun_id,a._sys_fun_name,(select icon_name from _sys_menu where _sys_fun_id = a._sys_fun_id limit 1) as icon_name',
  //     sqlBody: `from _sys_common_nav a where a._sys_user_id=${this.userID}`
  //   });

  //   if (res.data.success) {
  //     this.navData = [];
  //     res.data.rows.forEach(el => {
  //       this.navData.push({
  //         id: el.id,
  //         funID: el._sys_fun_id,
  //         funName: el._sys_fun_name,
  //         funIcon: el.icon_name || 'zhuangbeizhizao'
  //       });
  //     });
  //     this.navKey = Tsrv.utils.map(res.data.rows, el => el._sys_fun_id);
  //     this.navOld = Tsrv.utils.map(res.data.rows, el => el._sys_fun_id);
  //   } else {
  //     this.$msg(res.data.msg);
  //   }

  //   const filter = {
  //     $and: [{
  //       _sys_user_id: {
  //         $in: [Tsrv.getUserID()]
  //       }
  //     },
  //     {
  //       _sys_fun_id: {
  //         $in: diff
  //       }
  //     }]
  //   }
  //   const [b, res, rows, msg] = await this.doLoadData(
  //     '_sys_common_nav',
  //     '_sys_common_nav',
  //     filter
  //   );
  //   if (!b) {
  //     this.$msg(msg ?? res.msg);
  //     return;
  //   }
  //   // this.noticeData = rows;
  //   if (!Tsrv.utils.noValue(rows)) {
  //     idArr = res.data.rows.map(el => el.id);
  //   }
  // }

  public delIcon(id: number) {
    this.$Modal.confirm({
      title: Tsrv.getI18nByPath('oCommonNav.delete') as string,
      content: Tsrv.getI18nByPath('oCommonNav.okdeletenavigation') as string,
      onOk: () => {
        const delRec = new ts.T_ctdDelRec();
        delRec.setRule({} as ifs.I_rule).setFilter({ id: { $in: [id] } });
        Tsrv.delRows(
          '_sys_common_nav',
          Tsrv.globalVar.dbType.MYSQL,
          {} as ifs.I_rule,
          delRec
        ).then(([b, res, msg]) => {
          if (!b) {
            this.$msg(msg);
          } else {
            this.navInit();
          }
        });
      },
      onCancel: () => {
        this.$Message.info(Tsrv.getI18nByPath('oCommonNav.undelete'));
      },
      okText: Tsrv.getI18nByPath('others.ok') as string,
      cancelText: Tsrv.getI18nByPath('others.cancel') as string
    });
  }

  public diffArr(oldArr: Array<Number>, newsArr: Array<Number>) {
    const diff = {
      delArr: [],
      addArr: []
    };
    diff.delArr = oldArr.filter(item => !new Set(newsArr).has(item));
    diff.addArr = newsArr.filter(item => !new Set(oldArr).has(item));
    return diff;
  }

  public doAddTab(name: string) {
    this.addTabFunc(name);
  }

  public async requestNavUseless() {
    const filter = {
      _sys_user_id: {
        $in: [Tsrv.getUserID()]
      }
    };
    const [b, res, rows, msg] = await this.doLoadData(
      '_sys_common_nav',
      '_sys_common_nav',
      filter
    );
    if (!b) {
      this.$msg(msg ?? res.msg);
    } else {
      this.navData = [];
      rows.forEach(el => {
        const find = Tsrv.utils.find(
          this.navList,
          el1 => el1.key === el['_sys_fun_id']
        );
        if (find) {
          this.navData.push({
            funName: el.fun_name,
            id: el.id,
            funID: el['_sys_fun_id'],
            funIcon: Tsrv.noValue(find.icon) ? 'wy-jichushezhi' : find.icon
          });
        }
      });
      this.navOld = this.navData.map(el => el.funID);
    }
  }

  public doLoadData(funName: string, tableName: string, filter: object = {}) {
    const gpd = new ts.T_getPartDataArg();
    gpd.setFilter(filter);
    gpd.setFunName(tableName);
    gpd.setTableName(tableName);
    gpd.setDbType(Tsrv.globalVar.dbType.MYSQL);
    gpd.setLang(this.$i18n.locale);
    gpd.setPage(1, 99999);
    gpd.setRule({} as ifs.I_rule);

    return Tsrv.getData(gpd);
  }

  // private sendMsg() {
  //   const d = new ts.T_msgContent();
  //   d.setTitle('发发发');
  //   const messageData: ifs.I_wsUserMsg = new ts.T_wsMsg();
  //   messageData
  //     .setCMD(0)
  //     .setToClientID(Tsrv.getUserID())
  //     .setToUserNo('dev07')
  //     .setMsgType(3)
  //     .setData(d);
  //   Tsrv.sendMsg(messageData);
  // }
}
</script>
<style lang="scss" scoped>
.ivu-col {
  height: 250px;
  margin: 5px;
  overflow: hidden;
}
.common-nav {
  margin-top: 10px;
  height: 162px;
  .common-nav-item {
    float: left;
    text-align: center;
    width: 80px;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    i {
      width: 50px;
      height: 50px;
      line-height: 48px;
      border: 1px solid #e8eaec;
      border-radius: 50%;
      font-size: 24px;
    }
    p {
      font-size: 12px;
      display: block;
      margin-top: 3px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      display: none;
      border-radius: 50%;
      background-color: #ed4014;
      color: #fff;
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 16px;
    }
    &:hover span {
      display: block;
    }
  }
}
</style>
